<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getMouthNumberAPI } from "@/api/panel.ts";

const echart = ref()
const mouthList = ref([])
const dataList = ref<any>([])
const xList = ref([])
const timer = ref()

const init = () => {
  const myChart = echarts.init(echart.value)

  const options = {
    title: {},
    tooltip: {
      trigger: 'axis'
    },
    animationEasing: "linear",
    animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
    animationDurationUpdate: 500,  //数据更新动画的时长
    animation: true,  //开启动画
    xAxis: {
      animation: true,
      data: xList.value.slice(0, 6),
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 114, 226, 0.8)'
        }
      },
      axisLabel: {
        color: 'rgba(106, 188, 255, 1)',
        fontSize: 12
        // interval: 2
      }
    },
    yAxis: [
      {
        name: '篇',
        nameTextStyle: {
          color: '#66c6fd',
          padding: [0, 0, 20, 0],
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(0, 114, 226, 0.8)',
            type: 'dashed'
          }
        },

        axisLabel: {
          color: 'rgba(106, 188, 255, 1)',
          fontSize: 12,
          formatter: function (value: any) {
            return value + "";
          }
        }
      },
    ],
    series: [
      {
        name: '上游水位',
        type: 'bar',
        data: dataList.value,
        barWidth: 16,
        animation: true,
        animationDuration: 400,
        stack: 'over1',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(245, 231, 116, 1)'}, //从上往下的渐变
            {offset: 1, color: 'rgba(255, 172, 128, 1)'}
          ])
        },
        yAxisIndex: 0,
      },
    ]
  }

  return {myChart, options}
}

// 获取数据
const getMouthNumber = async () => {
  const res = await getMouthNumberAPI()
  mouthList.value = res.data
  dataList.value = res.data.map((item: any) => item.count)
  let x: any = []
  mouthList.value.forEach((item: any) => {
    x.push(item.day + '号')
  })
  xList.value = x
}

const showDataStepByStep = (chart: any) => {
  let i = 6;
  const length = dataList.value.length
  let timer = setInterval(() => {
    if (i < length) {
      chart.setOption({
        xAxis: {
          data: xList.value.slice(i - 6, i)
        },
        series: [
          {
            name: '上游水位',
            data: dataList.value.slice(i - 6, i)
          }
        ]
      });
      i++;
    } else {
      clearInterval(timer); // 停止定时器
    }
  }, 2500); // 每隔1秒更新一次数据
}

onMounted(() => {
  getMouthNumber().then((res: any) => {
    const { myChart, options } = init();
    myChart.setOption(options)
    showDataStepByStep(myChart)
    timer.value = setInterval(() => {
      showDataStepByStep(myChart)
    }, (xList.value.length - 6) * 2500)
  })
})
</script>

<template>
  <div class="sort-box center">
    <div class="sort-box-body">
      <div class="charts-sort" ref="echart">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sort-box {
  width: 100%;
  height: 100%;

  .sort-box-body {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 2px 1px 8px 2px rgb(123, 173, 222);
    background-color: #555162;

    .charts-sort {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
